<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="Ansonika">
    <title>Allaia | Bootstrap eCommerce Template - ThemeForest</title>

    <!-- Favicons-->
    <link rel="shortcut icon" href="../img3/favicon.ico" type="image/x-icon">
    <link rel="apple-touch-icon" type="image/x-icon" href="../img3/apple-touch-icon-57x57-precomposed.png">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="72x72" href="../img3/apple-touch-icon-72x72-precomposed.png">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="114x114" href="../img3/apple-touch-icon-114x114-precomposed.png">
    <link rel="apple-touch-icon" type="image/x-icon" sizes="144x144" href="../img3/apple-touch-icon-144x144-precomposed.png">

    <!-- GOOGLE WEB FONT -->
    <link rel="dns-prefetch" href="https://fonts.gstatic.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="anonymous">
    <link rel="preload" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap" as="fetch" crossorigin="anonymous">
    <script>
        !function(e,n,t){"use strict";var o="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700,900&display=swap",r="__3perf_googleFonts_c2536";function c(e){(n.head||n.body).appendChild(e)}function a(){var e=n.createElement("link");e.href=o,e.rel="stylesheet",c(e)}function f(e){if(!n.getElementById(r)){var t=n.createElement("style");t.id=r,c(t)}n.getElementById(r).innerHTML=e}e.FontFace&&e.FontFace.prototype.hasOwnProperty("display")?(t[r]&&f(t[r]),fetch(o).then(function(e){return e.text()}).then(function(e){return e.replace(/@font-face {/g,"@font-face{font-display:swap;")}).then(function(e){return t[r]=e}).then(f).catch(a)):a()}(window,document,localStorage);
    </script>

    <!-- BASE CSS -->
    <link href="../css/bootstrap.custom.min.css" rel="stylesheet">
    <link href="../css/style.css" rel="stylesheet">

    <!-- SPECIFIC CSS -->
    <link href="../css/listing.css" rel="stylesheet">

</head>
<body>
<div class="row small-gutters" id="aa">


</div>
<!-- /row -->
<nav style="text-align: right">
    <ul class="pagination" id="ul" style="margin: 0 auto;">

    </ul>
</nav>
<script src="../js/common_scripts.min.js"></script>
<script src="../js/main.js"></script>

<!-- SPECIFIC SCRIPTS -->
<script src="../js/sticky_sidebar.min.js"></script>
<script src="../js/specific_listing.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script>
    var currPage=1;
    pageSize=9;
    var search = location.search;
    console.log(search)
    // 按照=对参数分割
    var arr = search.split("=")
    if(arr.length >1){
        currPage = arr[1]
    }

    console.log(currPage)

    var k;
    var j= currPage.toString().split("&")
    if(j.length >1){
        k = j[0]
    }
    var l=1;

    if(k>0 && k<100){
        l=k;
    }
    /*var material
    var  tmp4=window.parent.document.getElementsByName("material")
    for(var i=0; i<tmp4.length; ++i)
        if(tmp4.item(i).checked){
            material =	tmp4.item(i).getAttribute("value");
        }
    console.log(material)*/

    var tmp1 = window.parent.document.getElementsByName("upper");
    var upper
    for(var i=0; i<tmp1.length; ++i)
        if(tmp1.item(i).checked){
            upper =	tmp1.item(i).getAttribute("value");
        }
    var sex
    var tmp2 = window.parent.document.getElementsByName("sex");
    for(var i=0; i<tmp2.length; ++i)
        if(tmp2.item(i).checked){
            sex =	tmp2.item(i).getAttribute("value");
        }
    var brand
    var tmp3= window.parent.document.getElementsByName("brand");
    for(var i=0; i<tmp3.length; ++i)
        if(tmp3.item(i).checked){
            brand =	tmp3.item(i).getAttribute("value");
        }
    var material
    var tmp4= window.parent.document.getElementsByName("material");
    for(var i=0; i<tmp4.length; ++i)
        if(tmp4.item(i).checked){
            material =	tmp4.item(i).getAttribute("value");
        }
    console.log(sex,brand,material,upper)

    var sou = self.parent.frames["iframe1"].frames.document.getElementById("sou").value
    // GetChildValue(p1,p2,p3,l,p4)
    GetChildValue(upper,material,brand,l,sex,sou)
    function GetChildValue(a,b,c,d,e,h){
        console.log(d)
        console.log(a,b,c,d,e,h)

        $.getJSON("http://localhost:8080/nb/shoe?currPage="+ d + "&pageSize=" + pageSize + "&goodBrand=" + c + "&goodSex="+ e + "&goodUpper=" + a + "&goodScience=" + b + "&goodName=" + h,function (data) {
            console.log(data)

            var list = data.data.list
            f(list)
            generatePage(data.data.navigatepageNums,  data.data.pageNum
                , data.data.pages)
        });

        function generatePage(navigatepageNums, pageNum, pages){
            var tmp1 = document.getElementsByName("upper");
            var upper
            for(var i=0; i<tmp1.length; ++i)
                if(tmp1.item(i).checked){
                    upper =	tmp1.item(i).getAttribute("value");
                }
            var sex
            var tmp2 = document.getElementsByName("sex");
            for(var i=0; i<tmp2.length; ++i)
                if(tmp2.item(i).checked){
                    sex =	tmp2.item(i).getAttribute("value");
                }
            var brand
            var tmp3= document.getElementsByName("brand");
            for(var i=0; i<tmp3.length; ++i)
                if(tmp3.item(i).checked){
                    brand =	tmp3.item(i).getAttribute("value");
                }
            var material
            var tmp4= document.getElementsByName("material");
            for(var i=0; i<tmp4.length; ++i)
                if(tmp4.item(i).checked){
                    material =	tmp4.item(i).getAttribute("value");
                }
            console.log(sex,brand,material,upper)

            var html = ''
            console.log(pageNum == 1)
            if(pageNum == 1){
                html += `<li class="disabled"><a href="#" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
            } else {
                html += `<li><a href="http://localhost:63343/qiguai/html/shoe2.html?currPage=${pageNum-1}&pageSize=9&goodBrand=${brand}&goodSex=${sex}&goodUpper=${upper}&goodScience=${material}" aria-label="Previous"><span aria-hidden="true">&laquo;</span></a></li>`
            }
            // console.log(navigatePages)
            // 生成页码
            for(let i = 0; i < navigatepageNums.length; i++){
                if(pageNum == navigatepageNums[i]){
                    // 当前页class=active，设置选中效果
                    html += `<li class="active"><a href="#">${navigatepageNums[i]}</a></li>`
                } else {
                    // showhero.html?
                    // 不是当前页
                    html += `<li><a href="http://localhost:63343/qiguai/html/shoe2.html?currPage=${navigatepageNums[i]}&pageSize=9&goodBrand=${brand}&goodSex=${sex}&goodUpper=${upper}&goodScience=${material}">${navigatepageNums[i]}</a></li>`
                }
            }

            if(pageNum == pages) {
                html += `<li class="disabled"><a href="#" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a></li>`
            } else {
                html += `<li><a href="http://localhost:63343/qiguai/html/shoe2.html?currPage=${pageNum+1}&pageSize=9&goodBrand=${brand}&goodSex=${sex}&goodUpper=${upper}&goodScience=${material}" onclick="" aria-label="Next">
                    <span aria-hidden="true">&raquo;</span>
                </a></li>`
            }

            $("#ul").html(html)

        }
    }


    function f(list) {
        let html = ''
        for(let i = 0; i < list.length; i++) {
            console.log(list[i])
            html += `
            <div class="col-6 col-md-4">
							<div class="grid_item">
								<span class="ribbon off">-30%</span>
								<figure>
									<a href="http://localhost:63343/qiguai/html/single-goods.html?id=${list[i].goodId}" target="_top">
										<img class="img-fluid lazy" src="${list[i].goodPhoto}" data-src="../img3/products/shoes/1.jpg" alt="">
									</a>
									<div data-countdown="2020/03/15" class="countdown"></div>
								</figure>
								<a href="http://localhost:63343/qiguai/html/single-goods.html?id=${list[i].goodId}" target="_top">
									<h3>${list[i].goodName}</h3>
								</a>
								<div class="price_box">
									<span class="new_price">$${list[i].goodMoney}</span>
									<span class="old_price">$${parseInt(list[i].goodMoney)+30}</span>
								</div>
								<ul>
									<li><a href="#0" class="tooltip-1" data-toggle="tooltip" data-placement="left" title="Add to favorites"><i class="ti-heart"></i><span>Add to favorites</span></a></li>
									<li><a href="#0" class="tooltip-1" data-toggle="tooltip" data-placement="left" title="Add to compare"><i class="ti-control-shuffle"></i><span>Add to compare</span></a></li>
									<li><a href="#0" class="tooltip-1" data-toggle="tooltip" data-placement="left" title="Add to cart"><i class="ti-shopping-cart"></i><span>Add to cart</span></a></li>
								</ul>
							</div>
							<!-- /grid_item -->
                </div>
                `
				}
				$("#aa").html(html)
			}

			/*function selectOther() {
				var tmp1 = document.getElementsByName("upper");
				var upper
				for(var i=0; i<tmp1.length; ++i)
					if(tmp1.item(i).checked){
						upper =	tmp1.item(i).getAttribute("value");
					}
				var sex
				var tmp2 = document.getElementsByName("sex");
				for(var i=0; i<tmp2.length; ++i)
					if(tmp2.item(i).checked){
						sex =	tmp2.item(i).getAttribute("value");
					}
				var brand
				var tmp3= document.getElementsByName("brand");
				for(var i=0; i<tmp3.length; ++i)
					if(tmp3.item(i).checked){
						brand =	tmp3.item(i).getAttribute("value");
					}
				var material
				var tmp4= document.getElementsByName("material");
				for(var i=0; i<tmp4.length; ++i)
					if(tmp4.item(i).checked){
						material =	tmp4.item(i).getAttribute("value");
					}
				console.log(sex,brand,material,upper)
				GetChildValue(upper,material,brand,l,sex,"")

			}*/

		</script>
</body>
</html>